<div class="container-fluid">
    <h4 class="content-head">报名信息</h4>
    <div class="table-wrapper users-table section">
        <div class="input-group" id="search">
            <label for="busiId">项目：</label>
            <select name="busiId" id="busiId">
                <option value="">请选择</option>
                <option th:each="busi :${busis}" th:value="${busi.id}" th:text="${busi.title}"></option>
            </select>

            <label for="grade">年级：</label>
            <select name="grade" id="grade">
                <option value="">请选择</option>
                <option th:each="grade :${grades}" th:value="${grade.value}" th:text="${grade.title}"></option>
            </select>

            <label for="className">班级：</label>
            <select name="className" id="className">
                <option value="">请选择</option>
                <option th:each="c :${classs}" th:value="${c.value}" th:text="${c.title}"></option>
            </select>

            <label for="Urealname">家长姓名：</label>
            <input type="text" name="Urealname" class="input-small" id="Urealname">

            <label for="Srealname">学生姓名：</label>
            <input type="text" name="Srealname" class="input-small" id="Srealname">

            <div style="width:33%"></div>

            <label for="Qsdate">查开始时间:</label>
            <input type="datetime" class="span8 date-picker" name="sdate" id="Qsdate"
                   th:value="${#calendars.format(sdate,'yyyy-MM-dd')}"/>

            <!--解决时间点击问题-->
            <div></div>

            <label for="Qedate">查结束时间:</label>
            <input type="datetime" class="span8 date-picker" name="edate" id="Qedate"
                   th:value="${#calendars.format(edate,'yyyy-MM-dd')}"/>

            <div></div>
            <span class="btn_area">
                <button id="search_btn" type="button" class="btn btn-purple btn-sm">
                    搜索
                    <i class="icon-search icon-on-right bigger-110"/>
                </button>
                <button id="search_down" type="button" class="btn btn-purple btn-sm">
                    <i class="icon-search icon-on-right bigger-110"></i>
                    导出
                </button>
            </span>
        </div>
        <div id="list"></div>
    </div>

    <script>
    (function () {
        var url = 'enroll/list-data';
        var $datagrid = $('#list');

        loadData();

        $('#search_btn').on('click', function () {
            loadData();
        });

        function loadData() {
            $datagrid.datagrid({
                action: false,
                'dataModel': {
                    'url': url,
                    'parameters': getCommJsonParams('search')
                },
                'columns': [
                    {title: '家长姓名', dataField: 'uname'},
                    {title: '家长手机',render:function(data){
                        return data.user.mobile;
                     }},
                    {title: '学生姓名', dataField: 'sname'},
                    {title: '学部', dataField: 'dep'},
                    {title: '年级', dataField: 'grade'},
                    {title: '班级', dataField: 'className'},
                    {title: '描述', dataField: 'describle'},
                    {title: '报名时间', dataField: 'createTime'}
                ]
            });
        };
    })();

        $('#search_down').click(function () {
            $.download({
                url: 'enroll/download',
                data: getCommJsonParams('search')
            });
        });

     $('.date-picker').datepicker({
            language: 'zh-CN',
            autoclose: true,
            format: 'yyyy-mm-dd'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

    </script>
</div>